<template>
    <div>
        <nav-bar>
            <template v-slot:default>我的收藏</template>
        </nav-bar>
    </div>
    <div class="collect">
       <van-card @click="itemClick(item.goods.id)" v-for="(item,index) in collect" :key="index"
        :price="item.goods.price+'.00'"
        :desc="item.goods.description"
        :title="item.goods.title"
        :thumb="item.goods.cover_url"
       /> 
       
    </div>
</template>
<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import { getCollect } from '@/network/collect';
import {onMounted,reactive,toRefs} from "vue";
import { useRouter } from 'vue-router';
export default({
    name:"Collect",
    components:{
        NavBar
    },
    setup(){
        const state = reactive({
            collect:{},
            id:[]

        })
        console.log(state);
        const router=useRouter()
        onMounted(()=>{
            getCollect().then(res=>{
                state.collect=res.data
                console.log(res.data);
            })
        })
        return{
            ...toRefs(state),
         itemClick:(id)=>{
        router.push({path:'/detail',query:{id:id}})
        }

    }
}
})
</script>
<!-- item:项目  description:描述 thumb:拇指 cover:涵盖 detail:详细-->
<style>
.collect{
    margin-top: 50px;
    text-align: left;
    padding: 10px;
}
.van-card{
    background-color: white;
}
</style>